<template>
	<div class="app-container">
		<el-row class='content-container'>
			<span class="label-titile">账号</span>
			<el-input v-model="reqData.screenName" placeholder="请输入账号" style="width:200px" @keyup.enter.native="search"></el-input>
			<span class="label-titile">操作时间</span>
			 <el-date-picker
		      v-model="timeArray"
		      type="datetimerange"
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期">
		    </el-date-picker>
			<el-button type="primary" @click="search">搜索</el-button>
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<el-table-column prop="userId" label="userId" align="center"></el-table-column>
				<el-table-column prop="userName" label="姓名" align="center"></el-table-column>
				<el-table-column prop="ip" label="登陆IP" align="center"></el-table-column>
				<el-table-column prop="browser" label="浏览器" align="center"></el-table-column>
				<el-table-column prop="os" label="操作系统" align="center"></el-table-column>
				<el-table-column prop="loginTime" label="登陆时间" align="center"></el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :reqData-count="totalPageSize" :reqData-sizes="[10, 20, 30, 50]" :reqData-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import { getUserLoginLog} from '@/api/history'
	import {  getMomentValue } from '@/utils/index'
	export default {
		data() {

			return {
				list: [],
				totalPageSize: 0,
				totalResultSize: 0,
				reqData: {
					currentPage: 1,
					screenName:"",
					startdate:"",
					enddate:""
				},
				options: [{
					value: "",label: "选择公司"
				}],
				timeArray:[]
			}
		},
		created(){
			this.getList({});
		},
		methods: {
			getList(data){
				getUserLoginLog(data).then((res)=>{
					let entity = res.entity;
					this.list = [...entity.data];
					this.totalPageSize = entity.page.totalPageSize;
					this.totalResultSize = entity.page.totalResultSize;
				});
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
				
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.reqData.startdate = getMomentValue(this.timeArray[0],"times");
				this.reqData.enddate = getMomentValue(this.timeArray[1],"times");
				this.resetCurrent();
				this.getList(this.reqData);	
			},
			

		}
	}
</script>

<style>

</style>